<template>
	<view>
		<!-- 定位 -->
		<view class="search-view">
			<image src="../../../static/coen/dingwei.svg" mode="widthFix"></image>
			<text class="search-text" @click="getdizhi()">{{ dizhi }}</text>
			<text>></text>
		</view>
		<!-- 搜索 -->
		<view class="search-cont">
			<view class="search" @click="seaRch()">
				<image src="../../../static/coen/sousuo.svg" mode="widthFix" class="search-img"></image>
				<input type="text" placeholder="麻辣烫" disabled />
			</view>
		</view>
		<!-- 自定义轮播 -->
		<view class="swiper-view">
			<swiper :autoplay="false" :interval="2000" :duration="1000" @change="bannerfun">
				<block v-for="(item, index) in label" :key="index">
					<swiper-item>
						<view class="swiper-item">
							<block v-for="(listdata, index) in item" :key="index">
								<view class="conteng-img">
									<image :src="listdata.img" mode="widthFix" class="uploadimg"></image>
									<text>{{ listdata.tit }}</text>
								</view>
							</block>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<!-- 指示点 -->
			<view class="instruct-view">
				<block v-for="(item, index) in instructdata" :key="index">
					<view class="instruct" :class="{ active: index == num }">{{
            item
          }}</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0,
				dizhi: '',
				// 面板指示点
				instructdata: ["", ""],
				// 轮播数组
				// lable: [
				// 	[{
				// 			img: "../../../static/inster/meishi.png",
				// 			title: "美食",
				// 		},
				// 		{
				// 			img: "../../../static/inster/chaoshi.png",
				// 			title: "超市便利",
				// 		},
				// 		{
				// 			img: "../../../static/inster/shuiguo.png",
				// 			title: "蔬菜水果",
				// 		},
				// 		{
				// 			img: "../../../static/inster/meituan.png",
				// 			title: "美团专送",
				// 		},
				// 		{
				// 			img: "../../../static/inster/paotui.png",
				// 			title: "跑腿代购",
				// 		},
				// 		{
				// 			img: "../../../static/inster/yexiao.png",
				// 			title: "夜宵",
				// 		},
				// 		{
				// 			img: "../../../static/inster/jintie.png",
				// 			title: "津贴联盟",
				// 		},
				// 		{
				// 			img: "../../../static/inster/pinping.png",
				// 			title: "甜点饮品",
				// 		},
				// 		{
				// 			img: "../../../static/inster/shaokao.png",
				// 			title: "龙虾烧烤",
				// 		},
				// 		{
				// 			img: "../../../static/inster/dangao.png",
				// 			title: "甜蜜蛋糕",
				// 		},
				// 	],
				// 	[{
				// 			img: "../../../static/inster/hanbao.png",
				// 			title: "汉堡披萨",
				// 		},
				// 		{
				// 			img: "../../../static/inster/liaoli.png",
				// 			title: "日韩料理",
				// 		},
				// 		{
				// 			img: "../../../static/inster/malatang.png",
				// 			title: "麻辣烫",
				// 		},
				// 		{
				// 			img: "../../../static/inster/kuaican.png",
				// 			title: "快食简餐",
				// 		},
				// 		{
				// 			img: "../../../static/inster/xianhua.png",
				// 			title: "浪漫鲜花",
				// 		},
				// 		{
				// 			img: "../../../static/inster/lazi.png",
				// 			title: "无辣不欢",
				// 		},
				// 		{
				// 			img: "../../../static/inster/jiaozi.png",
				// 			title: "饺子馆",
				// 		},
				// 		{
				// 			img: "../../../static/inster/xiaochi.png",
				// 			title: "小吃馆",
				// 		},
				// 		{
				// 			img: "../../../static/inster/baofan.png",
				// 			title: "煲仔饭",
				// 		},
				// 		{
				// 			img: "../../../static/inster/qita.png",
				// 			title: "其他",
				// 		},
				// 	],
				// ],
				label: [
					[{
							'img': '../../../static/swperPic/c6213db2a0bbc6b7342074e9eb51ca4a12844.png',
							'tit': '美食'
						},
						{
							'img': '../../../static/swperPic/fee33972115b6dbc8f0450c9c015712b16444.png',
							'tit': '异国料理'
						},
						{
							'img': '../../../static/swperPic/8ced60c2b71d719e1b15fd83d7402eba12998.png',
							'tit': '小吃馆'
						},
						{
							'img': '../../../static/swperPic/58ffd634fa6dddf05972d2cf2c57733f14610.png',
							'tit': '鲜花蛋糕'
						},
						{
							'img': '../../../static/swperPic/931b4bfa92a37d0f8c42b846f7d7c3b310738.png',
							'tit': '甜点饮品'
						},
						{
							'img': '../../../static/swperPic/84154e5477cc35b12d0e31d55924edb916525.png',
							'tit': '生鲜果蔬'
						},
						{
							'img': '../../../static/swperPic/325483c15c7e9550a43c917510bfcc6612958.png',
							'tit': '外卖专送'
						},
						{
							'img': '../../../static/swperPic/8934983cf94fee9b898ffb66316d312d6588.png',
							'tit': '超市便利'
						},
						{
							'img': '../../../static/swperPic/a21e2929ba2fa539323ef830260e9fd214345.png',
							'tit': '快食简餐'
						},
						{
							'img': '../../../static/swperPic/99e79c1aa265c1bdb024c69d3d5b6a6714564.png',
							'tit': '早餐'
						},
					],
					[{
							'img': '../../../static/swperPic/2/fcc082a6eaf5629defc545a613c7e18833016.png',
							'tit': '水果'
						},
						{
							'img': '../../../static/swperPic/2/fc35df04faa62724013a7613ffb476928891.png',
							'tit': '日料'
						},
						{
							'img': '../../../static/swperPic/7cb56f8d31e676ba08a17037d091a8d212894.png',
							'tit': '超市'
						},
						{
							'img': '../../../static/swperPic/2/f6666d49f0defc15b562ffa21a30a2e37020.png',
							'tit': '奶茶'
						},
						{
							'img': '../../../static/swperPic/2/ec00c0c96a6dd581f1aaf5a56c732a9c15606.png',
							'tit': '鲜花'
						},
						{
							'img': '../../../static/swperPic/2/d5dac8ba49aadf0fba2b7d153552be7e16309.png',
							'tit': '美味沙拉'
						},
						{
							'img': '../../../static/swperPic/2/b2e4c231f2f6d51dae2d2477d9c0d59e11334.png',
							'tit': '蛋糕'
						},
						{
							'img': '../../../static/swperPic/2/66392e935b88c88b991fe6e38b0bf5f111846.png',
							'tit': '咖啡'
						},
						{
							'img': '../../../static/swperPic/2/4641a3ad2b57992f7da02870350afbf916051.png',
							'tit': '日料火锅'
						},
						{
							'img': '../../../static/swperPic/2/17abddebb8035f89e8df1445ac462d3614785.png',
							'tit': '美味炸鸡'
						},
					]
				]
			};
		},

		methods: {
			// 滑块事件
			bannerfun(e) {
				console.log(e.detail.current);
				this.num = e.detail.current;
			},
			// 到搜索页面
			seaRch() {
				wx.navigateTo({
					url: "../search/search",
				});
			},

			getdizhi() {
				let that = this;
				uni.getLocation({
					type: "wgs84",
					success: (res) => {
						let location = res.latitude + "," + res.longitude;
						//调用逆解析接口
						uni.request({
							url: "https://apis.map.qq.com/ws/geocoder/v1/?location=location", //腾讯官方逆解析接口，可直接复制
							data: {
								location: location,
								key: "5PPBZ-C7VRQ-7YM5J-2QEK3-UMDCF-OUFGG", //自己申请的Key
							},
							method: "GET",
							success(res) {
								console.log(res.data.result.address, "解析成功返回的参数");
								that.dizhi = res.data.result.address
							},
							fail: (res) => {
								console.log(res.errMsg, "解析失败返回的错误信息");
							},
						});
						//服务器域名的配置文件中“request合法域名”中需要添加调用的“https://apis.map.qq.com”
					},
				});
			},

		},
	mounted(){
		this.getdizhi()
	}
	};
</script>

<style scoped>
	/* 定位 */
	.search-view image {
		width: 35upx;
		height: 35upx;
	}

	.search-view {
		font-size: 30upx;
		font-weight: bold;
		display: flex;
		align-items: center;
		height: 80upx;
	}

	.search-text {
		padding: 0 10upx;
	}

	/* 搜索 */
	.search-img {
		margin: auto 0 auto 20upx;
		width: 40upx;
		height: 40upx;
	}

	.search {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		flex-direction: flex;
		background: #eff3f4;
		border-radius: 10rpx;
	}

	.search input {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		font-size: 25upx;
		color: #666666;
	}

	.search-cont {
		display: flex;
		justify-content: space-between;
		height: 70upx;
		align-items: center;
	}

	/* 轮播 */

	swiper {
		height: 320upx !important;
	}

	/* 九宫格 */
	.swiper-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		height: 320upx;
	}

	.conteng-img {
		width: calc((100% / 5) - 12px) !important;
		margin: 6px;
		/* height: 120upx; */
		position: relative;
		text-align: center;
	}

	.conteng-img text {
		padding-top: 20upx;
		font-size: 25upx;
	}

	.uploadimg {
		width: 70upx;
		height: 70upx;
		border-radius: 50upx;
		display: block;
		margin: 0 auto;
	}

	/* 指示点 */
	.instruct-view {
		display: flex;
		justify-content: center;
		padding-top: 10upx;
	}

	.instruct {
		background: #e6e6e6;
		height: 10upx;
		width: 30upx;
		border-radius: 50upx;
		margin: 0 10upx;
	}

	.active {
		background: #fbae22 !important;
	}
</style>
